<template>
  <div class="table_wrap">
    <div hidden>
      <slot />
    </div>
    <table cellspacing="0" align="center" cellpadding="0">
      <tr v-for="rowi in row" :key="rowi">
        <td v-for="coli in col" :key="coli">
          <div v-if="data" class="table">
            <div class="label">
              <span v-if="children[(rowi-1)*col+coli-1]">{{ children[(rowi-1)*col+coli-1].label }}</span>
            </div>
            <div ref="prop" class="prop">
              <span v-if="children[(rowi-1)*col+coli-1]">{{ data|value(children[(rowi-1)*col+coli-1]) }}</span>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  filters: {
    value(val, obj) {
      if (obj.prop) {
        const prop = obj.prop
        const arr = prop.split('.')
        if (arr.length > 1) {
          let obj = val
          for (const item of arr) {
            obj = obj[item]
            if (!obj && obj !== 0) {
              return '-'
            }
          }
          return obj
        } else {
          return prop ? val[prop] : '-'
        }
      } else {
        return ''
      }
    }
  },
  props: {
    col: {
      type: Number,
      default: 3
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      row: 1,
      children: []
    }
  },
  watch: {
    row() {
      this.$forceUpdate()
    },
    data: {
      handler(val) {
        this.objData = JSON.parse(JSON.stringify(val))
        this.reUpdata()
      },
      deep: true
    }
  },
  mounted() {
    this.objData = JSON.parse(JSON.stringify(this.data))
    this.reUpdata()
  },
  methods: {
    reUpdata() {
      this.children = []
      const children = this.$children
      children.forEach(item => {
        const obj = {
          label: item.label,
          prop: item.prop || ''
        }
        obj[item.label] = item.prop
        if (item.prop && !this.objData[item.prop] && !this.objData[item.prop] !== 0) {
          this.objData[item.prop] = ''
        }
        this.children.push(obj)
      })
      this.row = Math.ceil(this.children.length / this.col)
      this.$nextTick(() => {
        const prop = this.$refs.prop
        for (let i = 0; i < prop.length; i++) {
          if (i < children.length) {
            prop[i].appendChild(children[i].$el)
          }
        }
      })
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
.table_wrap{
  width: 100%;
  // overflow-x: scroll;
}
table{
  width: 100%;
  // min-width: 600px;
  margin: auto;
  border-color:$border_color !important;
  background: #fff;
  border-top: 1px solid $border_color;/*no*/
  border-left: 1px solid $border_color;/*no*/
  tr{
    display: flex;
    td{
      width: 100px;
      flex: 1 0 auto;
      border-bottom: 1px solid $border_color;/*no*/
      border-right: 1px solid $border_color;/*no*/
    }
  }
}
.table{
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  .label,.prop{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    box-sizing: border-box;
    padding: 10px;
  }
  .prop{
    flex: 1 1 auto;
    font-size: 14px;
    color: #606266;
  }
  .label{
    color: #909399;
    font-weight: bold;
    font-size: 14px;
    background-color: #f5f7fa;
    border-bottom: 1px solid $border_color;/*no*/
  }
}
</style>
